import { FC, memo } from "react";
import classNames from "classnames";

import { IBaseComponentProps } from "@/types/component";

import "./index.scss";

export interface IDeviceUseInfoProps extends IBaseComponentProps {
  /**
   * svg符号ID前缀，默认icon
   */
  prefix?: string;
  /**
   * 图标类名，指定具体图标
   */
  iconClass: string;
  /**
   * 图标颜色
   */
  color?: string;
  /**
   * 图标大小
   */
  size?: string;
}

const prefixcls = "svg-icon";

export const SvgIcon: FC<IDeviceUseInfoProps> = memo((props) => {
  const { prefix = "icon", iconClass = "", color = "", size = "1em", className } = props;
  const symbolId = `${prefix}-${iconClass}`;

  return (
    <svg
      aria-hidden="true"
      className={classNames(prefixcls, className)}
      style={{ width: size, height: size }}
    >
      <use xlinkHref={`#${symbolId}`} fill={color} />
    </svg>
  );
});
